<template>
  <div id="about-me">
    <Loading v-if="!about.description" />
    <div class="title">
      <h2>{{ about.title }}</h2>
    </div>
    <div class="content">
      <div class="photo">
        <img :src="about.photo" alt="生活照片" />
      </div>
      <div class="description">
        <p>{{ about.description }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import http from "../../services/http";
import { reactive, toRefs, ref, watch, onMounted } from "vue";
import { Store, useStore } from "vuex";
import { getElementPosition } from "../../libs/tools";
export default defineComponent({
  name: "AboueMe",
  setup() {
    const store: Store<any> = useStore();
    const storeState = store.state;
    const state = reactive({
      about: {},
    });
    let h2: any = null;
    const getAbout = async () => {
      const { data: res } = await http.get("about");
      state.about = res;
    };
    getAbout();
    onMounted(() => {
      h2 = document.querySelector("#about-me h2");
    });
    watch(
      () => {
        return store.state.scrolled;
      },
      () => {
        let scrolled = storeState.scrolled.top / getElementPosition(h2).top;
        //scrolled += 0.1;
        if (scrolled >= 1) {
          scrolled = 1;
        } else if (scrolled <= 0) {
          scrolled = 0;
        }
        h2.style.setProperty("--percentage", `${scrolled * 100}%`);
      }
    );
    return {
      ...toRefs(state),
    };
  },
});
</script>

<style>
</style>